<template>
  <div class="container">
    <scroll-div :scroll-y="true"
                :style="{'height': '100%'}"
                @scroll="scroll"
                class="scroll_div">
      <p class="sub_title">补贴期数：第{{num}}期</p>
      <p class="sub_title">消费总额：¥{{list.total}}</p>
      <ul class="list">
        <li class="list_li"
            v-for="(item,index) in list.trans"
            :key="index">
          <span class="title">{{item.msg}}
            <span v-if="item.method==1">(金币）</span>
            <span v-if="item.method==2">(银币）</span>
          </span>
          <br>
          <span class="time">{{item.created_at}}</span>
          <span class="minute">10:11:11</span>
          <span class="amount">
            {{item.money}}
            <img class="icon"
                 v-if="imgOss&&item.method==1"
                 :src="imgOss+'/mp_3.1.6/goldcoin/gold.png'"
                 alt="">
            <img class="icon"
                 v-if="imgOss&&item.method==2"
                 :src="imgOss+'/mp_3.1.6/goldcoin/silver.png'"
                 alt="">
          </span>
          <span class="tip">{{item.order_sn}}</span>
        </li>
      </ul>
    </scroll-div>
  </div>
</template>

<script>
import common from "@/assets/js/mmk_common.js";
export default {
  data () {
    return {
      imgUrl: "https://img.ameimeika.com/",
      ImgBaseUrl: "https://h5.ameimeika.com/mp_images/",
      imgOss: common.image_resource,
      id: "",
      start_time: "",
      end_time: "",
      num: "",
      list: [],
      obj: "",
    };
  },
  methods: {
    getData () {
      wx.showLoading({
        title: "加载中",
        mask: true
      });
      common.mmk_Loading(0)
      common.fly_post(
        "/api/v4_5/order_project/trans_list",
        {
          id: this.id,
          start_time: this.start_time,
          end_time: this.end_time
        },
        msg => {
          common.mmk_Loading(1)
          let res = msg.data;
          res.data.trans.forEach(element => {
            element.created_at = new Date(element.created_at * 1000).Format("yyyy-MM-dd");
          });
          if (res.status_code == 0) {
            this.list = res.data;
          } else {
            common.mmk_Loading(2, res.message)
            return false;
          }
        }
      );
    },
  },

  onLoad (options) {
    wx.setNavigationBarTitle({
      title: "消费明细"
    });
    Object.assign(this.$data, this.$options.data());
    this.id = options.id;
    this.start_time = options.start_time;
    this.end_time = options.end_time;
    this.num = options.num
    this.getData();
  },
  onShow () { }
};
</script>

<style scoped lang="less">
.container {
  width: 100%;
  height: 100%;
  box-sizing: border-box;
  background-color: #f3f4f6;
  box-shadow: 0px 4px 8px 0px rgba(0, 0, 0, 0.06);
  overflow: hidden;
  .sub_title {
    line-height: 40px;
    font-size: 14px;
    color: #333;
    padding: 0 15px;
  }
}

.list {
  width: 100%;
  height: auto;
  /* padding:0 15px; */
  box-sizing: border-box;
  background: #fff;
  padding: 0 15px;
  .list_li {
    height: 59px;
    box-sizing: border-box;
    background-color: #fff;
    padding: 10px 0;
    box-sizing: border-box;
    position: relative;
    &::after {
      content: "";
      width: 100%;
      height: 1px;
      background-color: #e6e6e6;
      position: absolute;
      bottom: 0;
      left: 0;
    }
    &:nth-last-of-type(1)::after {
      content: "";
      height: 0;
    }

    .title {
      height: 20px;
      font-size: 14px;
      font-weight: 400;
      color: #333;
      line-height: 20px;
    }
    .time {
      height: 17px;
      font-size: 12px;
      font-weight: 400;
      color: #888;
      line-height: 17px;
    }
    .minute {
      color: #888;
      margin-left: 8px;
    }
    .amount {
      height: 24px;
      font-size: 17px;
      font-weight: 500;
      color: #ff383e;
      line-height: 24px;
      position: absolute;
      right: 0;
      top: 10%;
      .icon {
        width: 14px;
        height: 14px;
        margin-left: -4px;
      }
    }
    .tip {
      font-size: 12px;
      color: #666;
      line-height: 14px;
      position: absolute;
      right: 0;
      top: 50%;
    }
  }
}
</style>

